<template>
  <CreateActivityModal
    :visible="activityBeingCreated"
    @created="handleActivityCreatedEvent"
    @modal-hidden="activityBeingCreated = false"
  />

  <CardAsyncTable ref="tableRef" :card="card">
    <template #actions>
      <IButtonMinimal
        variant="primary"
        icon="Plus"
        :text="$t('activities::activity.create')"
        class="hide-when-editing mt-2 text-[0.8rem] sm:mt-0"
        @click="activityBeingCreated = true"
      />
    </template>

    <template #empty="slotProps">
      <div
        class="flex flex-col justify-center"
        :class="{
          'items-center py-4': !slotProps.search && !slotProps.loading,
        }"
      >
        <Icon
          v-show="!slotProps.search && !slotProps.loading"
          icon="Check"
          class="h-9 w-9 text-success-500"
        />

        <p
          class="text-neutral-500 dark:text-neutral-300"
          :class="{ 'mt-2 text-lg': !slotProps.search && !slotProps.loading }"
        >
          <span v-show="slotProps.loading" v-text="slotProps.text"></span>

          <span v-show="!slotProps.loading">
            {{
              slotProps.search ? slotProps.text : $t('core::app.all_caught_up')
            }}
          </span>
        </p>
      </div>
    </template>

    <template #title="{ row, formatted }">
      <div class="flex items-center">
        <div class="mr-1.5 mt-1">
          <StateChange
            :activity-id="row.id"
            :is-completed="row.is_completed"
            :disabled="!row.authorizations.update"
            @state-changed="reloadTable"
          />
        </div>

        <a
          class="link"
          href="#"
          @click="
            floatResourceInEditMode({
              resourceName: 'activities',
              resourceId: row.id,
            })
          "
          v-text="formatted"
        />
      </div>
    </template>
    <!-- eslint-disable-next-line vue/valid-v-slot -->
    <template #type.name="{ row, formatted }">
      <TextBackground
        :color="row.type.swatch_color"
        class="inline-flex items-center justify-center self-start rounded-md px-2.5 py-px text-sm/5 font-normal dark:!text-white"
      >
        <Icon :icon="row.type.icon" class="mr-1.5 h-4 w-4" />

        <span>{{ formatted }}</span>
      </TextBackground>
    </template>
  </CardAsyncTable>
</template>

<script setup>
import { ref } from 'vue'

import { useFloatingResourceModal } from '@/Core/composables/useFloatingResourceModal'

import StateChange from './ActivityStateChange.vue'

defineProps({ card: Object })

const tableRef = ref(null)
const activityBeingCreated = ref(false)

const { floatResourceInEditMode } = useFloatingResourceModal()

function handleActivityCreatedEvent() {
  reloadTable()
  activityBeingCreated.value = false
}

function reloadTable() {
  tableRef.value.reload()
}
</script>

<style scoped>
:deep(tr > td) {
  position: relative;
}

:deep(tr > td:first-child:after),
:deep(tr > td:first-child:before) {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
}

:deep(td.due:first-child:before),
:deep(td.due:first-child:after) {
  width: auto;
  height: 100%;
  top: 0;
  border-left: 3px solid rgba(var(--color-danger-500), 1);
}

:deep(td.not-due:first-child:before),
:deep(td.not-due:first-child:after) {
  width: auto;
  height: 100%;
  top: 0;
  border-left: 3px solid transparent;
}
</style>
